<script setup>
	import {
		getOrderListService,
		handleOrderService,
		getOrderListByStateService,
		getOrderListByPageService,
	} from '@/api/order'
	import { ref } from 'vue'

	const tableData = ref([])
	// const orderList = async () => {
	// 	let result = await getOrderListService()

	// 	tableData.value = result.data
	// }
	// orderList()
	const pageSize = ref(3)
	const pageNum = ref(1)
	const total = ref(20)
	const allByPage = async () => {
		let params = {
			pageNum: pageNum.value,
			pageSize: pageSize.value,
		}
		let result = await getOrderListByPageService(params)
		total.value = result.data.total
		tableData.value = result.data.items
	}
	allByPage()
	const handleSizeChange = (size) => {
		pageSize.value = size
		console.log(pageSize.value)
		allByPage()
	}
	const handleCurrentChange = (num) => {
		pageNum.value = num
		console.log(pageNum.value)
		allByPage()
	}
	const handleEdit = async (index, row) => {
		tableData.value[index].state = true
		await handleOrderService(tableData.value[index].id, true)
		orderList()
	}
	const handleDelete = async (index, row) => {
		// console.log(index, row)
		tableData.value[index].state = false
		await handleOrderService(tableData.value[index].id, false)
		orderList()
	}
	const handleState = (index) => {
		if (tableData.value[index].state == true) {
			return '已处理'
		}
		return '未处理'
	}
	const state = ref('')
	const orderListByState = async () => {
		let result = await getOrderListByStateService(state.value)
		tableData.value = result.data
	}
</script>

<template>
	<el-form :model="state" label-width="auto" style="max-width: 200px">
		<el-form-item label="处理状态">
			<el-select
				v-model="state"
				placeholder="选择处理状态"
				@change="orderListByState">
				<el-option label="已处理" value="true" />
				<el-option label="未处理" value="false" />
				<el-option label="全部" value="all" />
			</el-select>
		</el-form-item>
	</el-form>

	<el-table :data="tableData" style="width: 100%">
		<el-table-column label="更新日期" width="300" prop="updateTime">
		</el-table-column>
		<el-table-column label="商铺编号" width="120" prop="storeId">
		</el-table-column>
		<el-table-column label="材料编号" width="120">
			<template #default="scope">
				<el-popover
					effect="light"
					trigger="hover"
					placement="top"
					width="auto">
					<template #default>
						<div>创建时间: {{ scope.row.createTime }}</div>
					</template>
					<template #reference>
						<el-tag>{{ scope.row.id }}</el-tag>
					</template>
				</el-popover>
			</template>
		</el-table-column>
		<el-table-column label="数量" width="120" prop="quantity">
		</el-table-column>
		<el-table-column label="处理状态" width="120" prop="state">
			<template #default="scope">
				<div>{{ handleState(scope.$index) }}</div>
			</template>
		</el-table-column>
		<el-table-column label="操作">
			<template #default="scope">
				<el-button
					size="small"
					@click="handleEdit(scope.$index, scope.row)">
					处理
				</el-button>
				<el-button
					size="small"
					type="danger"
					@click="handleDelete(scope.$index, scope.row)">
					取消处理
				</el-button>
			</template>
		</el-table-column>
	</el-table>
	<el-pagination
		v-model:current-page="pageNum"
		v-model:page-size="pageSize"
		:page-sizes="[3, 5, 7, 10]"
		:disabled="disabled"
		:background="background"
		layout="total, sizes, prev, pager, next, jumper"
		:total="total"
		@size-change="handleSizeChange"
		@current-change="handleCurrentChange" />
</template>

<style scoped></style>
